<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {margin: 0;padding: 0;}
			li {list-style: none;}
			a {text-decoration: none;}
			ul{width:1000px; height:40px;margin: 0 auto;border: 1px solid #ccc;box-sizing: content-box;}
			li{float:left;width:100px;}
			li a{display: block;height: 40px;padding-left:30px;width:100px;border-right: 1px dashed #ccc;line-height: 40px;box-sizing: border-box;
			  color: black;background: url(images/360bg.png) no-repeat 7px -55px;transition:1s;color:#909090; font-size:14px;}
			li:nth-child(2) a{background: url(images/360bg.png) no-repeat 7px -132px;}
			li:nth-child(3) a{background: url(images/360bg.png) no-repeat 7px -213px;}
			li:nth-child(4) a{background: url(images/360bg.png) no-repeat 7px -296px;}
			li:nth-child(5) a{background: url(images/360bg.png) no-repeat 7px -376px;}
			li:nth-child(6) a{background: url(images/360bg.png) no-repeat 7px -454px;}
			li:nth-child(7) a{background: url(images/360bg.png) no-repeat 7px -529px;}
			li:nth-child(8) a{background: url(images/360bg.png) no-repeat 7px -604px;}
			li:nth-child(9) a{background: url(images/360bg.png) no-repeat 7px -683px;}
			li:nth-child(10) a{background: url(images/360bg.png) no-repeat 7px -761px;}
			
			li:nth-child(1) a:hover{background: url(images/360bg.png) no-repeat 7px -93px;}
			li:nth-child(2) a:hover{background: url(images/360bg.png) no-repeat 7px -173px;}
			li:nth-child(3) a:hover{background: url(images/360bg.png) no-repeat 7px -254px;}
			li:nth-child(4) a:hover{background: url(images/360bg.png) no-repeat 7px -336px;}
			li:nth-child(5) a:hover{background: url(images/360bg.png) no-repeat 7px -416px;}
			li:nth-child(6) a:hover{background: url(images/360bg.png) no-repeat 7px -494px;}
			li:nth-child(7) a:hover{background: url(images/360bg.png) no-repeat 7px -565px;}
			li:nth-child(8) a:hover{background: url(images/360bg.png) no-repeat 7px -644px;}
			li:nth-child(9) a:hover{background: url(images/360bg.png) no-repeat 7px -722px;}
			li:nth-child(10) a:hover{background: url(images/360bg.png) no-repeat 7px -801px;}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul>
				<li>
					<a href="">我的主页</a>
				</li>
				<li>
					<a href="">新闻头条</a>
				</li>
				<li>
					<a href="">电视剧</a>
				</li>
				<li>
					<a href="">最新电影</a>
				</li>
				<li>
					<a href="">小说大全</a>
				</li>
				<li>
					<a href="">旅游度假</a>
				</li>
				<li>
					<a href="">小游戏</a>
				</li>
				<li>
					<a href="">正品购物</a>
				</li>
				<li>
					<a href="">美团外卖</a>
				</li>
				<li>
					<a href="">移动互联</a>
				</li>
			</ul>
		</div>
	</body>
</html>
